import React from 'react';
import {Text,View,TextInput,TouchableOpacity,ImageBackground,Image,StyleSheet} from 'react-native'; 
import { useState,useEffect } from 'react';
import '../../global'
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';

const styles = {
    registerBox:{
        width:'60%',
        marginLeft:'20%',
        paddingBottom:'5%',
        borderRadius:20
    },
    boxPhone:{
        display:'flex',
        flexDirection:'row',
        marginTop:pxtodpH(30)
    },
    fontSt:{
        fontSize:25,
        lineHeight:80,
        marginLeft:'2%',
        marginRight:'5%'
    },
    inputSt:{
        backgroundColor:'rgba(255,255,255,0)',
        width:'65%',
        marginLeft:'5%',
        fontSize:25,
        borderBottomColor:'black',
        borderBottomWidth:2,
        marginBottom:'3%'
    },
    chooseBtn:{
        width:200,
        borderColor:'#FFFFCC',
        borderRadius:50,
        borderWidth:5,
        marginTop:'10%',
        marginLeft:'35%',
        height:75,
        paddingTop:12,
        backgroundColor:'#fcc'
    },
}

const ChangeMessagePage = ({navigation}) => {
    const [ischange,setIschange]=useState(0)
    const [activeChoose,setActiveChoose] = useState([
        {width:100,height:100,borderRadius:50},
        {width:100,height:100,borderRadius:50}
    ])
    const [isSubmit,setIsSubmit] = useState(0); 
    const [sexual,setSexual] = useState("unknown");
    const [userName,setUserName] = useState("");
    const [signature,setSignature] = useState(""); 
    const [selectImg,setSelectImg] = useState("");
    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
            base64:true
        });
        if(!result.cancelled){
            setSelectImg(result.uri);
            setIschange(1);
        }
    }
    const changeUserName = (e) => {
        setUserName(e)
    }
    const onEndUserName = () => {
        setUserName(userName);
    }
    const changeSignature = (e) => {
        setSignature(e)
    }

    const onEndSignature = () => {
        setSignature(signature);
    }
    return(
        <ImageBackground
          source={require('../../images/1go1.jpg')}
          style={{
              width:w,
              height:h-80
          }}
        >   
            <TouchableOpacity
                onPress={pickImage}
                style={{
                    width:pxtodpW(200),
                    height:pxtodpH(200),
                    marginTop:pxtodpH(100),
                    marginLeft:pxtodpW(270)
                }}
            >
              <ImageBackground
                 source={{ uri: selectImg }}
                 style={{
                    borderRadius:100,
                    width:pxtodpW(200),
                    height:pxtodpH(200),
                    borderWidth:2,
                    borderColor:'black',
                    overflow:'hidden',
                    display:'flex',
                    flexDirection:'column',
                    justifyContent:'center',
                    paddingLeft:pxtodpW(60)
                 }}
                 >
                <Ionicons name="add" size={50} color="black" 
                    style={selectImg==""?{}:{display:'none'}}
                />
                <Text style={
                    ischange==1?{display:'none'}:{
                    marginLeft:pxtodpW(-10),
                }}>点击添加头像</Text>
                </ImageBackground>
            </TouchableOpacity>
            <View style={{marginTop:pxtodpH(60), display:'flex',flexDirection:'row'}}>
                <TouchableOpacity activeOpacity={0.7} 
                onPress={(e)=>{
                    setActiveChoose([
                        {width:100,height:100,borderWidth:7,borderColor:'rgb(145,205,255)',borderRadius:50},
                        {width:100,height:100,borderRadius:50}
                    ])
                    setSexual("man");
                }}
                style={{
                    marginLeft:pxtodpW(200)
                }}>
                    <Image 
                        source={require('../../images/boy.jpg')}
                        style={activeChoose[0]}
                    />
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.7} 
                onPress={()=>{
                    setActiveChoose([
                        {width:100,height:100,borderRadius:50},
                        {width:100,height:100,borderWidth:7,borderColor:'rgb(255,139,139)',borderRadius:50}
                    ])
                    setSexual("woman");
                }}
                style={{
                    marginLeft:pxtodpW(80),
                    marginBottom:50
                }}>
                    <Image 
                        source={require('../../images/girl.jpg')}
                        style={activeChoose[1]}
                    />
                </TouchableOpacity>
            </View>
            <View style={styles.registerBox}>
                <View style={styles.boxPhone}>
                    <Text style={styles.fontSt}>昵称</Text>
                    <TextInput 
                        style={styles.inputSt}
                        textContentType='username'
                        onChangeText={changeUserName}
                        onEndEditing={onEndUserName}
                        value={userName}/>    
                </View>
                <View style={styles.boxPhone}>
                    <Text style={styles.fontSt}>签名</Text>
                    <TextInput 
                        style={styles.inputSt}
                        textContentType='signature'
                        onChangeText={changeSignature}
                        onEndEditing={onEndSignature}
                        value={signature}/>    
                </View> 
            </View>
            <TouchableOpacity style={styles.chooseBtn}
            onPress={()=>{
                setIsSubmit(isSubmit+1);
                userMessage.user_signature = signature;
                userMessage.user_name = userName;
                userMessage.user_gendar = sexual;
                fetch('http://82.157.94.91:8000/users/edit_info',{
                    method:'post',
                    body:JSON.stringify({
                        user_name: userName,
                        user_avatar: "http://82.157.94.91:8000/defaultAvatar.jpg",
                        user_gendar: sexual, 
                        user_signature: signature
                    }),
                    headers:{
                        'Authorization':"Bearer "+token,
                        'Content-Type':'application/json'
                    }
                })
                navigation.navigate('User');
            }}> 
                <Text style={{fontSize:30,textAlign:'center',color:'#fff'}}>确  定</Text>
            </TouchableOpacity>
        </ImageBackground>
    )
}

export default ChangeMessagePage